<template>
  <el-table :data="tableData" style="width: 100%;" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class='nc-table' :class="className" :height="height || '100%'" :border="border" :row-class-name="tableRowClassName" @row-dblclick="tableRowDbClick" @row-click="tableRowClick" v-load-more.expand="{func: loadMore, target: '.el-table__body-wrapper', distance: distance}" :load-more-disabled="disabledPaging" :highlight-current-row='isHighlightCurrentRow' ref="inRuTabRef">
    <el-table-column v-if="columnIndex" type="index" align="center" label="序号" width="90">
    </el-table-column>
    <template v-for="(item, index) in column">
      <el-table-column :width="item.width" v-if="!item.slot" sortable :render-header="renderheader" :align="item.align || 'center'" :key="index" :prop="item.prop" :label="item.label">
      </el-table-column>
      <el-table-column :width="item.width" sortable v-else :render-header="renderheader" :align="item.align || 'center'" :key="index" :prop="item.prop" :label="item.label">
        <template slot-scope="scope">
          <slot :name="item.slot" :row="scope.row" :value="scope.row[item.prop]"></slot>
        </template>
      </el-table-column>
    </template>
    <!-- show-overflow-tooltip  -->

  </el-table>
</template>

<script>
export default {
  props: {
    distance: {
      type: Number,
      default: 0
    },
    height: { // 高度border
      type: Number,
      default: 0
    },
    column: {
      type: Array,
      default: () => ([])
    },
    tableData: {
      type: Array,
      default: () => ([])
    },
    border: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    columnIndex: {
      type: Boolean,
      default: true
    },
    className: {
      type: String,
      default: ""
    },
    isHighlightCurrentRow: {
      // 是否可以点击选中
      type: Boolean,
      default: false
    },
    disabledPaging: {
      // 是否滚动分页 默认不能滚动
      type: Boolean,
      default: true
    },
    turnPages: {
      // 滚动分页
      type: Object,
      default: () => ({
        total: 0,
        pageSize: 0,
        pageNum: 0
      })
    }
  },
  data() {
    return {
      tableClickIndex: undefined
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      // eslint-disable-next-line no-param-reassign
      row.rowIndex = rowIndex;
      if (rowIndex % 2 === 1) {
        return "warning-row";
      }
      return "";
    },
    tableRowDbClick(row) {
      this.$emit("tableRowClick", row);
    },
    tableRowClick(row) {
      if (row.rowIndex !== this.tableClickIndex) {
        this.tableClickIndex = row.rowIndex;
        this.$emit("tableClick", row);
      }
    },
    // 默认点击第一个
    defaultClick(value = 0) {
      this.$nextTick(() => {
        // if (this.tableData[0]) {
        this.tableClickIndex = value;
        this.$refs.inRuTabRef.setCurrentRow(this.tableData[value]);
        // }
      });
    },
    // 设置标题换行
    renderheader(h, { column }) {
      return h("div", { class: "column-style" }, [
        h("div", {}, column.label.split(",")[0]),
        h("div", {}, column.label.split(",")[1])
      ]);
    },
    // 滚动分页
    loadMore() {
      if (this.turnPages.pageSize * this.turnPages.pageNum <= this.turnPages.total) {
        this.$emit("pageChangeData", this.turnPages.pageSize, this.turnPages.pageNum + 1);
      }
    }
  }
};
</script>
